<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Animation</title>
    <script type="text/javascript" src="esl.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="margin:0px;">
    <script type="text/javascript">
    require.config({
        paths: {
            d3: 'https://d3js.org/d3.v4.min'
        },
        packages: [
            {
                name: 'zrender',
                location: '../src',
                main: 'zrender'
            }
        ]
    });

    require(
        [
            'zrender',
            'zrender/graphic/shape/Rect',
            'd3',
            'stats',
            'zrender/svg/svg'
        ],
        function (zrender, Rect, d3, Stats) {

            var zr = zrender.init(document.getElementById('main'), {
                // renderer: 'svg'
            });

            var stats = new Stats();
            document.body.appendChild(stats.dom);

            var cnt = 6000;
            var elements = [];
            var routes = [];
            var routeCnt = 1000;

            var route = [];
            for (var i = cnt - 1; i >= 0; --i) {
                var x = window.innerWidth / cnt * i;
                var y = window.innerHeight / cnt * i;
                var rect = new Rect({
                    shape: {
                        width: 10,
                        height: 10,
                        x: x,
                        y: y
                    },
                    silent: true
                });
                elements.push(rect);
                zr.add(rect);
                route.push([x, y]);
            }
            routes.push(route);

            var w = window.innerWidth;
            var h = window.innerHeight;
            for (var r = 1; r < routeCnt; ++r) {
                var route = [];
                for (var i = cnt - 1; i >= 0; --i) {
                    var x = routes[r - 1][i][0] + Math.round(Math.random() * 10 - 5);
                    var y = routes[r - 1][i][1] + Math.round(Math.random() * 10 - 5);
                    if (x < 0 || x > w) {
                        x = Math.round(w * Math.random());
                    }
                    if (y < 0 || y < h) {
                        y = Math.round(h * Math.random());
                    }
                    route.push([x, y]);
                }
                routes.push(route);
            }
            var rId = 0;

            tick();

            function tick() {
                requestAnimationFrame(tick);

                stats.begin();

                for (var i = 0; i < cnt; ++i) {
                    elements[i].shape.x = routes[rId][i][0];
                    elements[i].shape.y = routes[rId][i][1];
                    elements[i].dirty(true);
                }
                ++rId;
                if (rId === routeCnt) {
                    rId = 0;
                }

                stats.end();
            }

        }
    );

    </script>
    <div id="main" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0"></div>
</body>
</html>